$(document).ready(function(){
	//References
	var sections = $(".menu li");

	var sections1 = $("#section_1 a");
	var sections2 = $("#section_2 a");
	var sections3 = $("#section_3 a");
	var sections4 = $("#section_4 a");
	var sections5 = $("#section_5 a");
	
	var loading = $("#loading");
	var content = $("#innercontent");
	
	//Manage click events
	sections.click(function(){
		//show the loading bar
		
		showLoading();
		//load selected section
		switch(this.id){
			
			case "section_1":
				content.slideUp();
				content.load("sections.html #section_1", hideLoading);
				sections1.addClass('selected');	
				sections5.removeClass('selected');
				sections4.removeClass('selected');
				sections3.removeClass('selected');
				sections2.removeClass('selected');
				content.slideDown();
				break;
			case "section_2":
				content.slideUp();
				content.load("sections.html #section_2", hideLoading);
				content.slideDown();
				sections2.addClass('selected');
				sections5.removeClass('selected');
				sections4.removeClass('selected');
				sections3.removeClass('selected');
				sections1.removeClass('selected');
				
				break;
			case "section_3":
				content.slideUp();
				content.load("sections.html #section_3", hideLoading);
				content.slideDown();
				sections3.addClass('selected');	
				sections5.removeClass('selected');
				sections4.removeClass('selected');
				sections2.removeClass('selected');
				sections1.removeClass('selected');
				break;
			case "section_4":
				content.slideUp();
				content.load("sections.html #section_4", hideLoading);
				content.slideDown();
				sections4.addClass('selected');	
				sections5.removeClass('selected');
				sections2.removeClass('selected');
				sections3.removeClass('selected');
				sections1.removeClass('selected');
				break;
			case "section_5":
				content.slideUp();
				content.load("sections.html #section_5", hideLoading);
				content.slideDown();
				sections5.addClass('selected');	
				sections4.removeClass('selected');
				sections2.removeClass('selected');
				sections3.removeClass('selected');
				sections1.removeClass('selected');
				break;
				case "external":
				content.slideUp();
				content.load("external.html", hideLoading);
				content.slideDown();
				break;
			default:
				//hide loading bar if there is no selected section
				hideLoading();
				break;
		}
		
	});


	 
	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}
	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});